<template>
<el-container>
  <el-header>
    <div id="logo">
      <img src="@/assets/logo.png" />
      <p class="logo_web">www.ybpcn.com</p>
    </div>
    <div id="admin">

      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <span class="head_portrait"><img src="@/assets/admin.png" /></span><span class="admin_name">vsuper</span>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item disabled>修改头像</el-dropdown-item>
          <el-dropdown-item>
            <router-link to='/info' class="info">修改信息</router-link>
          </el-dropdown-item>
          <el-dropdown-item disabled>修改密码</el-dropdown-item>
          <el-dropdown-item>
            <router-link to='/website/complaint' class="info">投诉建议</router-link>
          </el-dropdown-item>
          <el-button class="quit" @click="open">退出后台</el-button>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-header>
  <el-container>
    <el-aside width="240px">
      <leftMenu></leftMenu>
    </el-aside>
    <el-main>
      <router-view name="main" />
    </el-main>
  </el-container>
</el-container>
</template>

<script>
import leftMenu from '@/components/leftMenu.vue'

export default {
  name: 'home',
  components: {
    leftMenu
  },
  methods: {
    open() {
      this.$confirm('此操作将退出后台, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      });
    },
    handleCommand(command) {

    },
    // getAgency () {
    //     return this.axios.get('/api/member/getAgency')
    //         .then((res) => {
    //             console.log("asd");
    //         })
    // },
  }
}
</script>

<style lang="scss" scoped>
.info {
    font-size: 14px;
    color: #606266;
    text-decoration: none;
}
.info:hover{
  color: #66b1ff;
}
.quit {
    border: 0;
    border-radius: 0;
}
.el-header {
    border-bottom: 1px solid #eee;
    height: 60px;
        position: fixed;
        width: 100%;
        z-index: 1000;
        background: #fff;
        top: 0;
    #logo {
        display: inline-flex;

        img {
            height: 40px;
            margin: 10px 0;
        }

        span {
            font-size: 22px;
            font-weight: bold;
            color: #f73a0d;
            padding-left: 10px;
        }
    }
    #admin {
        float: right;
        margin-top: 20px;
        margin-right: 1px;
        .head_portrait {
            img {
                width: 36px;
                margin-right: 8px;
                float: left;
                margin-top: -9px;
            }
        }

        .admin_name {
            margin-right: 16px;
            font-size: 14px;
            color: #888888;
        }
        .service:hover{
            color:#ff7b00;
        }

    }
}

.el-aside {
    background-color: #545c64;
}

.el-container {
    height: 100%;
    margin-top: 30px;
}
.logo_web {
    position: relative;
    left: -98px;
    top: 36px;
    font-size: 12px;
    font-weight: bold;
    color: #444444;
    height: 22px;
    margin: 0
}
</style>
